<template>
    <div class="personInfo-container">
        <el-card class="box-card">
            <div style="font-size: 20px; float: left;">头像</div>
            <br>
<!--            <img :src="imageUrl" />-->
            <el-divider></el-divider>
            <el-upload
                    class="avatar-uploader"
                    :action="uploadUrl"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <el-divider></el-divider>
            <div>
                <span style="font-size: 20px; float: left;">个人资料</span>
            </div>
            <br>
            <el-divider></el-divider>
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="昵称">
                    <el-input v-model="form.nickname"></el-input>
                </el-form-item>
                <el-form-item label="手机号码">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="男" :value="1"></el-option>
                        <el-option label="女" :value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="用户类型" prop="type">
                    <el-radio-group v-model="form.type" @change="change">
                        <el-radio :label="2">房东</el-radio>
                        <el-radio :label="1">租客</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div style="text-align: center;">
                <el-button type="primary" @click="onSubmit" style="background-color: #83AF9B; border: 0px;">更新信息</el-button>
            </div>
        </el-card>

    </div>
</template>

<script>
    function getBase64(img, callback) {
        const reader = new FileReader();
        reader.addEventListener('load', () => callback(reader.result));
        reader.readAsDataURL(img);
    }
    export default {
        inject: ['reload'],
        name: "Profile",
        data() {
            return {
                loading: false,
                imageUrl: '',
                form: {
                    username: '',
                    nickname:'',
                    phone: '',
                    sex: '',
                    type: ''
                },
                actionUrl: ''
            }
        },
        created() {
            const _this = this
            this.form.username = localStorage.getItem('username')
            _this.$http.get('/user/getUserByUsername/'+ this.form.username).then(function (resp) {
                console.log(resp)
                if (resp.data.code === 201)
                {
                    if(resp.data.data.avatar != null)
                    {
                        _this.imageUrl = require('../static/user/' + resp.data.data.avatar)
                    }
                    _this.form.nickname = resp.data.data.nickname
                    _this.form.phone = resp.data.data.phone
                    _this.form.sex = resp.data.data.sex
                    _this.form.type = resp.data.data.type
                }

            })
        },
        methods: {
            onSubmit: function () {
                const _this = this
                _this.$http.post('/user/userProfile', _this.form).then(function (resp) {
                    console.log(resp)
                    if(resp.data.code === 203)
                    {
                        _this.$message.success("更新成功")
                        _this.$router.go(0)
                    }else {
                        _this.$message.error("更新错误")
                    }
                })
            },
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                console.log(this.imageUrl)
                this.reload()
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            change: function (e) {
                this.form.type = e
            }
        },
        computed: {
            uploadUrl: function () {
                return 'http://localhost:8002/user/upload?username=' + this.form.username
            }
        }
    }
</script>

<style scoped>
    >>>.avatar-uploader .el-upload {
        border: 1px solid #D3D3D3;
        background-color: #D3D3D3;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }

    .avatar-uploader > .ant-upload {
        width: 128px;
        height: 128px;
    }
    >>>.el-radio__input.is-checked .el-radio__inner
    {
        background: #83AF9B;
        border-color: #83AF9B;
    }
    >>>.el-radio__input.is-checked+.el-radio__label {
        color: #83AF9B;
    }
</style>
